<template>
  <div class="home">
    <div class="content">
      <Form :model="formItem" :label-width="80">
        <FormItem label="请假类型">
          <Select v-model="formItem.type">
            <Option v-for="item in leaveType" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="开始时间">
          <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择开始时间" style="width: 216px;" v-model="formItem.startTime"></DatePicker>
        </FormItem>
        <FormItem label="结束时间">
          <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择结束时间" style="width: 216px;" v-model="formItem.endTime"></DatePicker>
        </FormItem>
        <FormItem label="时长">
          <Input v-model="formItem.duration" placeholder="请输入时长"></Input>
        </FormItem>
        <FormItem label="请假事由">
          <Input v-model="formItem.reason" type="textarea" :rows="4" placeholder="请输入请假事由"></Input>
        </FormItem>
        <FormItem label="所在部门">
          <Select v-model="formItem.department">
            <Option v-for="item in sectionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="审批人">
          <Select v-model="formItem.approval" multiple>
            <Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="抄送人">
          <Select v-model="formItem.copy" multiple>
            <Option v-for="item in copyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div style="text-align: center;margin-top: 50px;">
        <Button type="primary">确认</Button>
        <Button type="ghost" style="margin-left: 18px">取消</Button>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex'
  export default {
    name: 'sendLeave',
    components: {
    },
    data() {
      return {
        formItem: {
          type: '',
          startTime: '',
          endTime: '',
          duration: '',
          reason: '',
          department: '',
          approval: [],
          copy: []
        },
        leaveType: [
          {value: 'thing', label: '事假'}
        ],
        sectionList: [
          {value: 'section0', label: '蓝色星际西安研发中心'},
          {value: 'section1', label: '项目一组'},
          {value: 'section2', label: '项目二组'},
          {value: 'section3', label: '项目三组'},
          {value: 'section4', label: '项目四组'}
        ],
        approvalList: [
          {value: '001', label: 'QQQ'},
          {value: '002', label: 'WWW'},
          {value: '003', label: 'EEE'},
          {value: '004', label: 'RRR'}
        ],
        copyList: [
          {value: '001', label: 'TTT'},
          {value: '002', label: 'YYY'},
          {value: '003', label: 'UUU'},
          {value: '004', label: 'III'}
        ]
      }
    },
    methods: {
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, .8);
  }
  .content {
    width: 800px;
    height: 800px;
    font-size: 18px;
  }
</style>